<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">
    用户名：<input type="text" ref="username" name="" id="">
    <button @click="submit">提交</button>
    <com-a ref="coma"></com-a>
  </div>
  <script>

    var eventbus = new Vue();

    const comc = {
      template: `<div>c:{{$root.msg}}</div>`,
      mounted() {
        console.log(this.$parent.msg)
        console.log('getMap:', this.getMap)
        eventbus.$on('my-event', (msg) => {
          console.log(msg)
        })
      },
      inject: ['getMap']
    }

    const comb = {
      template: '<div>b<com-c></com-c></div>',
      data() {
        return {
          msg: "form comb message"
        }
      },
      components: {
        'com-c': comc
      }
    }


    Vue.component('com-a', {
      template: "<div>a <com-b></com-b></div>",
      data() {
        return {
          msg: 'from coma message'
        }
      },
      components: {
        //组件的局部注册
        'com-b': comb
      }
    })

    var vm = new Vue({
      el: "#app",
      data: {
        msg: 'from root message',
        isMap: true
      },
      provide: function () {
        return {
          getMap: this.isMap
        }
      },
      methods: {
        submit() {
          let val = this.$refs.username.value;
          let comaMsg = this.$refs.coma.msg;
          // debugger;
          console.log(val);
          //强制更新视图，很少用
          // this.$forceUpdate();
        }
      },
      mounted() {
        setTimeout(() => {
          eventbus.$emit('my-event', 'event bus message')
        }, 3000)
      }
    })
  </script>
</body>

</html>